<script>
import {defineComponent} from 'vue'

import headerCom from "@/components/headerCom.vue";
import swiperCom from "@/components/swiperCom.vue";

import {getCourse} from "@/api/http";


export default defineComponent({
    name: "indexView",
    components: { swiperCom, headerCom},

    data(){
        return{
            num: 10,
            freeList:'',
            discountList:'',
            boutiqueList:'',
        }
    },
    methods:{
        fromSon1(data){
            console.log(data)
        }
    },
    created() {
        getCourse('free').then(res=>{
            this.freeList=res.rows;
        })
        getCourse('discount').then(res=>{
            this.discountList=res.rows;
        })
        getCourse('boutique').then(res=>{
            this.boutiqueList=res.rows;
        })
    }
})
</script>

<template>
<div>
    <headerCom :type1="num"></headerCom>
    <router-view></router-view>
    <swiperCom @fromSon="fromSon1"></swiperCom>
<!--    <courseList></courseList>-->
<!--    <div class="conin">-->
<!--        <titleBox class="box" v-for="item in freeList" :key="item.courseId" :item="item"></titleBox>-->
<!--    </div>-->

<!--    <div class="conin">-->
<!--        <titleBox class="box" v-for="item in boutiqueList" :key="item.courseId" :item="item"></titleBox>-->
<!--    </div>-->
<!--    <div class="conin">-->
<!--        <titleBox class="box" v-for="item in discountList" :key="item.courseId" :item="item"></titleBox>-->
<!--    </div>-->
</div>
</template>

<style scoped lang="less">
.conin {
    width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;

    .box {
        width: 19%;
    }
}
</style>